<template>
  <view :style="{
    marginTop: mt + 'rpx',
  }" class="glo-info">
    <template v-for="item in info" :key="item.label">
      <view v-if="item.type === 'single'" class="glo-info-item">
        <view :style="[labelStyleAssign]" class="glo-info-item-label">{{ item.label }}：
        </view>
        <view :style="[valueStyleAssign]" class="glo-info-item-value">{{
          item.value || "-"
        }}</view>
      </view>
      <view v-else-if="item.type === 'multiple'" :style="[{ gridTemplateColumns: item.columns || '1fr 1fr' }]"
        class="glo-info-row">
        <view v-for="subItem in item.list" :key="subItem.id" class="glo-info-item">
          <view :style="[labelStyleAssign]" class="glo-info-item-label">{{ subItem.label }}：</view>
          <view :style="[valueStyleAssign]" class="glo-info-item-value">{{
            subItem.value || "-"
          }}</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  info: {
    type: Object,
    default: () => ({}),
  },
  type: {
    type: String,
    default: "default",
  },
  mt: {
    type: String,
  },
  labelStyle: {
    type: Object,
    default: () => { },
  },
  valueStyle: {
    type: Object,
    default: () => { },
  },
});

const labelStyleAssign = computed(() => {
  return Object.assign(
    {
      fontSize: "23rpx",
      lineHeight: "32rpx",
      fontWeight: "400",
      color: "#767676",
    },
    props.labelStyle
  );
});

const valueStyleAssign = computed(() => {
  return Object.assign(
    {
      fontSize: "23rpx",
      lineHeight: "32rpx",
      fontWeight: "400",
      color: "#3D3D3D",
    },
    props.valueStyle
  );
});
</script>

<style lang="scss" scoped>
.glo-info-row {
  display: grid;
  align-items: center;
}

.glo-info-item {
  display: flex;

  .glo-info-item-label {
    flex-shrink: 0;
  }

  .glo-info-item-value {
    word-break: break-all;
  }
}
</style>
